<template>
    <div class="channelList">
        <van-tabs @click="tabChange">
            <van-tab v-for="item in brotherCategory" :title="item.name" :key="item.id" :name="item.id">
                <div class="title">
                    <h2>{{item.name}}</h2>
                    <p>{{item.front_desc}}</p>
                </div>
                <div class="content">
                    <div class="space"></div>
                    <ul class="product_list">
                        <li v-for="subItem in currentCategoryData" :key="subItem.id">
                            <img :src="subItem.list_pic_url" alt="">
                            <div class="title">
                                {{subItem.name}}
                            </div>
                            <div class="price">
                                {{subItem.retail_price | RMBformat}}
                            </div>
                        </li>
                    </ul>
                </div>

            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import {
        GetChannelData,
        GetCurrentChannelData,
        GetGoodsRelatedData
    } from '@/request/api'
    export default {
        data() {
            return {
                brotherCategory: [],
                currentCategoryData: {}
            }
        },
        methods: {
            tabChange(categoryId, name) {
                GetCurrentChannelData({categoryId}).then(res => {
                    if (res.errno === 0) {
                        this.currentCategoryData = res.data.goodsList
                    }

                })
            },
        },
        created() {
            let id = this.$route.query.id
            GetChannelData({
                id
            }).then(res => {
                if (res.errno == 0) {
                    this.brotherCategory = res.data.brotherCategory
                    GetCurrentChannelData({categoryId:"1005000"}).then(res => {
                        if (res.errno === 0) {
                            this.currentCategoryData = res.data.goodsList
                        }
                    })
                }
            })
        }
    }
</script>

<style lang="less" scoped>
    .title {
        text-align: center;
        font-size: .12rem;

        h2 {
            font-size: 18px;
            height: 50px;
            line-height: 50px;
        }

        p {
            height: 30px;
            line-height: 30px;
            color: #666;
            font-size: .14rem;
        }
    }

    .content {
        background-color: #fff;

        .space {

            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
        }

        .product_list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 10px;
            box-sizing: border-box;
            width: 100%;

            li {
                width: 49%;
                background: #fff;
                text-align: center;
                margin-bottom: 10px;
                padding-bottom: 10px;

                img {
                    width: 100%;
                    display: block;
                }

                .price {
                    margin-top: 8px;
                    color: darkred;
                }
            }
        }


    }
</style>